<template>
  <div class="container">
    <div class="input-box">
      <div class="section">
        <text>收货人</text>
        <input
          type="text"
          placeholder="姓名"
          maxlength="10"
          :value="name"
          @input="onName"
        />
      </div>
      <div class="section">
        <text>手机号码</text>
        <input
          type="number"
          maxlength="11"
          placeholder="11位手机号码"
          :value="phone"
          @input="onPhone"
        />
      </div>
      <div class="section" @click="handleAddress">
        <text>所在地区</text>
        <div class="pca">{{ province }} {{ city }} {{ area }}</div>
        <div class="arrow">
          <img src="../../static/images/icon/more.png" alt="" />
        </div>
      </div>
      <div class="section">
        <text>详细地址</text>
        <input
          type="text"
          placeholder="如楼号/单元/门牌号"
          :value="address"
          @input="onAddress"
        />
        <div class="arrow" @click="openMap">
          <!-- <img src="http://jiales.gz-yami.com/addr.png" alt="" /> -->
        </div>
      </div>
    </div>
    <div class="btn-box">
      <div class="keep btn" @click="handleAddAddress">
        <text>保存收货地址</text>
      </div>
      <div v-if="addrId != 0" class="clear btn" @click="handleDel">
        <text>删除收货地址</text>
      </div>
      <uni-popup ref="popup"  type="dialog">
        <uni-popup-dialog
          message="成功消息"
          title="是否删除"
          :duration="2000"
          :before-close="true"
          @close="close"
          @confirm="confirm"
        ></uni-popup-dialog>
      </uni-popup>
    </div>
    <div
      class="address-mask visibility"
      :class="isReess ? 'visible' : 'hidden'"
    >
      <div class="address-title">
        <text @click="handleIsReess">确定</text>
      </div>
      <picker-view
        class="picker-view"
        @change="bindChange"
        :value="value"
        :indicator-style="indicatorStyle"
        data-sts="3"
      >
        <picker-view-column v-for="(item, i) in addressData" :key="i">
          <view class="item" v-for="val in item" :key="val.areaId">{{
            val.areaName
          }}</view>
        </picker-view-column>
      </picker-view>
    </div>
  </div>
</template>

<script>
import {
  getRegionData,
  pushAddressList,
  getAddressUserInfo,
  deleteAddress,
  putAddress,
} from "@/utils/user";

export default {
  data() {
    return {
      isReess: false,
      value: [0, 0, 0],
      indicatorStyle: `height: 50px;`,
      addressData: [[], [], []],
      province: "",
      city: "",
      area: "",
      name: "",
      phone: "",
      address: "",
      addrId: 0,
      cityId: 110100000000,
      provinceId: 110000000000,
      areaId: 110101000000,
      index1: null,
      index2: null,
      index3: null,
      latitude: null,
      longitude: null,
    };
  },
  async onLoad(option) {
    if (option.addrId) {
      this.addrId = option.addrId;
      await this.getAddressUserInfo();
      this.value = [this.index1, this.index2, this.index3];
    } else {
      await this.getRegionData(0, 0);
      this.province = this.addressData[0][this.value[0]].areaName;
      this.city = this.addressData[1][this.value[1]].areaName;
      this.area = this.addressData[2][this.value[2]].areaName;
    }
    uni.getLocation().then(([, res]) => {
      this.latitude = res.latitude;
      this.longitude = res.longitude;
    });
  },
  methods: {
    handleDel() {
      this.$refs.popup.open();
    },
    // 取消
    close() {
      this.$refs.popup.close();
    },
    // 删除确定
    async confirm() {
      const data = await deleteAddress(this.addrId);
      
      if (data === "删除地址成功") {
        uni.navigateTo({
          url: "/pages/deliveryAddress/index",
        });
      }
      this.$refs.popup.close();
    },
    async getAddressUserInfo() {
      const data = await getAddressUserInfo(this.addrId);
      this.name = data.receiver;
      this.phone = data.mobile;
      this.address = data.addr;
      this.province = data.province;
      this.city = data.city;
      this.area = data.area;
      this.provinceId = data.provinceId;
      this.areaId = data.areaId;
      this.cityId = data.cityId;
      const data1 = await getRegionData(0);
      const data2 = await getRegionData(data.provinceId);
      const data3 = await getRegionData(data.cityId);
      this.addressData = [[...data1], [...data2], [...data3]];
      this.addressData[0].filter((item, i) => {
        if (item.areaId === data.provinceId) {
          this.index1 = i;
          return i;
        }
      });

      this.addressData[1].filter((item, i) => {
        if (item.areaId === data.cityId) {
          this.index2 = i;
          return i;
        }AC
      });
      this.addressData[2].filter((item, i) => {
        if (item.areaId === data.areaId) {
          this.index3 = i;
          return i;
        }
      });
    },
    async getRegionData(i, pid) {
      for (; i < this.addressData.length; i++) {
        const data = await getRegionData(pid);
        pid = data[0].areaId;
        this.$set(this.addressData, i, data);
      }
    },
    getDiffIndex(curIndexs, indexs) {
      let res = 0;
      for (; res < curIndexs.length; res++) {
        if (curIndexs[res] !== indexs[res]) {
          break;
        }
      }
      return res;
    },
    setChangDefultIndex(arr, index) {
      return arr.map((val, i) => (i <= index ? val : 0));
    },
    async bindChange({ detail }) {
      const index = this.getDiffIndex(detail.value, this.value);
      await this.getRegionData(
        index + 1,
        this.addressData[index][detail.value[index]].areaId
      );
      this.value = this.setChangDefultIndex(detail.value, index);
    },
    handleIsReess() {
      this.isReess = false;
      this.province = this.addressData[0][this.value[0]].areaName;
      this.provinceId = this.addressData[0][this.value[0]].areaId;
      this.city = this.addressData[1][this.value[1]].areaName;
      this.cityId = this.addressData[1][this.value[1]].areaId;
      this.area = this.addressData[2][this.value[2]].areaName;
      this.areaId = this.addressData[2][this.value[2]].areaId;
    },
    handleAddress() {
      this.isReess = true;
    },
    onName(e) {
      this.name = e.detail.value;
    },
    onPhone(e) {
      this.phone = e.detail.value;
    },
    onAddress(e) {
      this.address = e.detail.value;
    },


    async handleAddAddress() {
      if (this.addrId) {
        const data = await putAddress({
          addr: this.address,
          addrId: this.addrId,
          area: this.area,
          areaId: this.areaId,
          city: this.city,
          cityId: this.cityId,
          mobile: this.phone,
          province: this.province,
          provinceId: this.provinceId,
          receiver: this.name,
          userType: 0,
        });
        console.log(data,'-----23123-----');
        if (data === "修改地址成功") {
          uni.navigateTo({
            url: "/pages/delivery-address/index",
          });
        }
      } else {
        const data = await pushAddressList({
          addr: this.address,
          addrId: this.addrId,
          area: this.area,
          areaId: this.areaId,
          city: this.city,
          cityId: this.cityId,
          mobile: this.phone,
          province: this.province,
          provinceId: this.provinceId,
          receiver: this.name,
          userType: 0,
        });
        if (data === "添加地址成功") {
          uni.navigateTo({
            url: "/pages/delivery-address/index",
          });
        }
      }
    },
    // 地图功能
    openMap() {
      const key = "SM4BZ-PZSCX-MPS4M-73NCR-NENOZ-34F4R"; //使用在腾讯位置服务申请的key
      const referer = "shop"; //调用插件的app的名称
      const location = JSON.stringify({
        latitude: this.latitude,
        longitude: this.longitude,
      });
      const category = "生活服务,娱乐休闲";
      wx.navigateTo({
        url:
          "plugin://chooseLocation/index?key=" +
          key +
          "&referer=" +
          referer +
          "&location=" +
          location +
          "&category=" +
          category,
      });
    },
  },
  
};
</script>

<style lang='scss' scoped>
.visibility {
  transition: transform 400ms ease 0ms;
  transform-origin: 50% 50%;
}
.visible {
  transform: translateY(0vh);
}
.hidden {
  transform: translateY(200vh);
}
.address-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  .address-title {
    background: #fff;
    height: 70rpx;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    position: absolute;
    bottom: 350rpx;
    line-height: 70rpx;
    text-align: right;
    text {
      padding: 0 10rpx;
    }
  }
  .picker-view {
    position: absolute;
    bottom: 0;
    width: 750rpx;
    height: 350rpx;
    margin-top: 20rpx;
    background: #fff;
  }
  .item {
    height: 50px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

.input-box {
  margin-bottom: 50rpx;
  background: #fff;
  padding: 0 20rpx;

  .section {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 28rpx;
    padding: 30rpx 0;
    line-height: 48rpx;
    height: 100%;
    box-sizing: border-box;
    border-bottom: 2rpx solid #e5e5e5;
    text {
      width: 20%;
      color: #333;
    }
    input {
      width: 70%;
      padding: 0 20rpx;
      color: #333;
    }

    .pca {
      width: 70%;
      padding: 0 20rpx;
    }
    .arrow {
      width: 28rpx;
      height: 28rpx;
      image {
        width: 100%;
        height: 100%;
        vertical-align: top;
      }
    }
  }
}
.btn-box {
  padding: 5px 10px;
  width: 100%;
  text-align: center;
  margin: auto;
  text {
    font-size: 30rpx;
  }
  .keep {
    color: #fff;
    background-color: #eb2444;
  }
  .clear.btn,
  .keep.btn {
    width: 60%;
    height: 80rpx;
    line-height: 80rpx;
    margin: auto;
    text-align: center;
    border: 1rpx solid #eb2444;
    border-radius: 50rpx;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 1px 0 rgba(255, 255, 255, 0.3);
  }
  .clear.btn {
    margin-top: 40rpx;
    color: #eb2444;
    background-color: #f8f0f1b6;
  }
}
</style>